<template>
  <!--栏目基金列表模块-->
  <div>
    <List-Module
      :listWrapClass="classMap[columnCode]"
      :title="columnInfo.columnName"
      :subTitle="columnInfo.columnDesc"
      :dataList="dataList.slice(0, 3)"
      :moreLink="moreLink"
    >
      <template v-slot:funcTag>
        <Title-Tag :tagList="tabList" @switchtag="swtichTag"></Title-Tag>
      </template>
    </List-Module>
  </div>
</template>

<script>
import ListModule from '@/components/listModule/module.vue';
import TitleTag from '@/components/listModule/titleTag.vue';
import { getFundColumn } from '@/api';
import groupBy from 'lodash.groupby';

let Common;
// 栏目编码与栏目模块class的对应map
const classMap = {
  fund_list_col1: 'wenjian_jx', // 基金聚合页-稳健精选
  fund_list_col2: 'shouyi_yx', // 基金聚合页-收益优先
  index_col1: 'hot_product', // 首页-热门产品
};
export default {
  name: 'ColumnModule',
  props: ['columnCode'],
  components: {
    ListModule,
    TitleTag,
  },
  data() {
    return {
      loading: true,
      dataList: [],
      listWrapClass: '',
      classMap,
      columnInfo: {},
      tabList: [],
      moreLink: ''
    };
  },
  beforeMount() {
    Common = require('@/utils/common').default;
  },
  mounted() {
    this.getFundColumn();
  },
  methods: {
    // 栏目基金（前端处理数据，方便线上核对接口数据）
    async getFundColumn() {
      try {
        this.loading = true;
        const { returnCode, dataSet } = await getFundColumn(this.columnCode);
        this.loading = false;
        if (returnCode === '0' && dataSet.length) {
          [this.columnInfo] = dataSet;
          const { tabList, colFundMap, prodList } = Common.handleFundColumnData(dataSet);
          this.tabList = tabList;
          this.colFundMap = colFundMap;
          // 无tab时，取parent下面的栏目列表
          if (!this.tabList.length) {
            this.dataList = this.colFundMap.parent || [];
          } else {
            [this.activedTag] = tabList;
            this.dataList = colFundMap[this.activedTag] || [];
          }
          // 产品大于3个时，显示查看更多链接
          if (prodList.length > 3) {
            this.moreLink = `${process.env.VUE_APP_PUBLIC_PATH}/fund/columnFundList?columnCode=${this.columnCode}&columnName=${this.columnInfo.columnName}`;
          }
        }
        this.$emit('loaded');
      } catch (ex) {
        console.log('getFundColumn ex', ex);
        this.loading = false;
        this.$emit('loaded');
      }
    },
    // 切换标签
    swtichTag(tag) {
      if (tag !== this.activedTag) {
        this.activedTag = tag;
        this.dataList = this.colFundMap[this.activedTag] || [];
      }
    }
  },
};
</script>

<style lang="less" scoped>
/*栏目基金列表模块*/
.high_end_list_module_wrap {
  padding-bottom: 20px;
}
</style>